import React, { useState } from 'react';
import { 
  View, 
  Text, 
  TouchableOpacity, 
  StyleSheet, 
  ScrollView
} from 'react-native';
import Modal from 'react-native-modal';

const TypeStyleModal = ({ visible, onClose, onSubmit }: { visible: boolean, onClose: () => void, onSubmit: (data: { type: string, style: string }) => void }) => {
  
  
  // 状态管理
  const [selectedType, setSelectedType] = useState('自定义');
  const [selectedStyle, setSelectedStyle] = useState('自定义');

  // 类型选项配置
  const typeOptions = [
    '自定义', '文章', '单选', '多选', '判断', 
  ];

  // 风格选项配置
  const styleOptions = [
    '自定义',  '标准化', '真题', '仿真题', 
  ];
  
  return (
    <Modal
      isVisible={visible}
      onBackdropPress={onClose}
      style={styles.modal}
      animationIn="slideInUp"
      animationOut="slideOutDown"
    >
      <View style={styles.container}>
        {/* 类型选择区域 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>类型</Text>
          <View style={styles.optionContainer}>
            {typeOptions.map((type) => (
              <TouchableOpacity
                key={type}
                style={[
                  styles.optionButton,
                  selectedType === type && styles.selectedButton
                ]}
                onPress={() => setSelectedType(type)}
              >
                <Text style={[
                  styles.optionText,
                  selectedType === type && styles.selectedText
                ]}>
                  {type}
                </Text>
              </TouchableOpacity>
            ))}
          </View>
        </View>

        {/* 风格选择区域 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>风格</Text>
          <ScrollView horizontal showsHorizontalScrollIndicator={false}>
            {styleOptions.map((style) => (
              <TouchableOpacity
                key={style}
                style={[
                  styles.optionButton,
                  selectedStyle === style && styles.selectedButton
                ]}
                onPress={() => setSelectedStyle(style)}
              >
                <Text style={[
                  styles.optionText,
                  selectedStyle === style && styles.selectedText
                ]}>
                  {style}
                </Text>
              </TouchableOpacity>
            ))}
          </ScrollView>
        </View>

        {/* 确定按钮 */}
        <TouchableOpacity 
          style={styles.confirmButton}
          onPress={() => onSubmit({ type: selectedType, style: selectedStyle })}
        >
          <Text style={styles.confirmText}>确定</Text>
        </TouchableOpacity>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  modal: {
    justifyContent: 'flex-end',
    margin: 0,
  },
  container: {
    backgroundColor: 'white',
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16,
    padding: 20,
    maxHeight: '60%',
  },
  section: {
    marginBottom: 24,
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: '500',
    color: '#333',
    marginBottom: 12,
  },
  optionButton: {
    backgroundColor: '#F0F4FF',
    borderRadius: 20,
    paddingVertical: 8,
    paddingHorizontal: 16,
    margin: 5,
  },
  selectedButton: {
    backgroundColor: '#2A6FFA',
  },
  optionText: {
    color: '#666',
    fontSize: 14,
  },
  selectedText: {
    color: 'white',
  },
  confirmButton: {
    backgroundColor: '#2A6FFA',
    borderRadius: 8,
    padding: 16,
    alignItems: 'center',
    marginTop: 16,
  },
  confirmText: {
    color: 'white',
    fontSize: 16,
    fontWeight: '500',
  },
  optionContainer:{
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
});

export default TypeStyleModal;